<div class="col-md-12 col-lg-6 order-1 order-sm-2">
<% if current_user && current_user.can_moderate? %>
<h3><%= translation('users.list.user_moderation') %></h3>
<p><%= translation('users.list.admins_ban_spam') %> </p>
<% end %>
  <div class="row">
    <div class ="col-md-8">
      <h2><%= raw translation('People') %></h2>
      <h5><%= translation('Recently active on Publiclab') =%></h5>
    </div>
    <% if current_user && (@map_lat.blank? || @map_lon.blank?) %>
      <div class="col-md-4">
        <a class="btn btn-outline-secondary blurred-location-input" style="color:#666;" hover="this.style.background='grey';" submit_to="/profile/tags/create/<%= current_user.uid %>"><i class="fa fa-map-marker" style="color:#c40;"></i> <%= translation('users.list.add_your_location') %> </a>
      </div>
    <% end %>
  </div>
    <div>
    <br>
      <p style="width: 100%; font-size:14px; text-align: center; border-bottom: 1px solid #ccc; line-height:2px; margin: 10px 0 20px;">
      <span style="background-color: #fff; padding: 0 10px; color: #808080;">Sort by:
      <a href = "<%= people_path %>?sort=username" class="sort-style <% if params[:sort] == "username" %>selected<%end%>"> <%= translation('users.list.username') %></a><span> | </span>
      <a href = "<%= people_path %>?sort=last_activity" class="sort-style <% if params[:sort] == "last_activity" %>selected<%end%>"> <%= translation('users.list.last_activity') %></a><span> | </span>
      <a href = "<%= people_path %>?sort=joined" class="sort-style <% if params[:sort] == "joined" %>selected<%end%>"><%= translation('users.list.joined') %></a>
      </span>
      </p>
      <br/>
    </div>
  <div class="row" id="user_cards">

    <% @users.each do |user| %>
      <div class ="col-md-6" id="user">
        <div class="card peoplecard"<% if user.status == 0 %> style="background-color: #ffc;"<% end %>>
           <div class="row card-body">
            <div class="col-lg-12 nopadding">
              <div class="profile-image text-center">
                  <%= image_tag(user.profile_image, class:'rounded-circle img-fluid', id:'profile-photo') %>
              </div>
            </div>
            <div class="col-lg-12 nopadding">
              <div class="card-info">
                <div class="d-flex justify-content-between">
                  <div>
                    <a href="/profile/<%= user.username %>" style="word-break:break-word;"><%= user.username %></a>
                    <% if current_user && current_user.role == "admin" %>
                      <% if user.has_power_tag("oauth:twitter") %><i class="fa fa-twitter" rel="tooltip" title="Twitter OAuth connected"></i><% end %>
                      <% if user.has_power_tag("oauth:facebook") %><i class="fa fa-facebook" rel="tooltip" title="Facebook OAuth connected"></i><% end %>
                      <% if user.has_power_tag("oauth:github") %><i class="fa fa-github" rel="tooltip" title="GitHub OAuth connected"></i><% end %>
                      <% if user.has_power_tag("oauth:google_oauth2") %><i class="fa fa-google" rel="tooltip" title="Google OAuth connected"></i><% end %>
                    <% end %>
                  </div>
                  <div>
                      <a class="ellipsis" data-toggle="dropdown">&nbsp<i class="fa fa-ellipsis-h" style="color: #666; font-size:15px;"></i></a>
                      <ul class="dropdown-menu dropdown-menu-right" style="font-size:10px;">
                      <li><a style="color: #808080; cursor: no-drop;">Joined <%= distance_of_time_in_words(user.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></a></li>
                      <li><a href='/notes/author/<%= user.name %>'><%= user.note_count %> Research Notes</a></li>
                      <li><a style="color: #808080; cursor: no-drop;"><%= user.nodes.count %> Wiki Edits</a></li>
                      <% if current_user && current_user.can_moderate? %>
                         <% if user.status == 0 %>
                           <li class="btn-success m-2" style="border-radius: 2px;"><a class="p-1 text-center w-100" style="color: white;" href="/profile/<%= user.username %>"><i class="fa fa-check-circle fa-white"></i> Unban on profile</a></li>
                             <p class="text-center m-0"><i class='fa fa-ban' style="color:#a00;"></i> <%= translation('users.list.banned') %></p>
                           <% elsif user.status == 1 && user != current_user %>
                             <li><a href="/profile/<%= user.username %>"><%= translation('users.list.see_full_profile') %></a></li>
                             <li class="btn-danger m-2" style="border-radius: 2px;"><a class="p-1 text-center w-100" style="color: white;" data-confirm="<%= translation('users.list.are_you_sure',{},false) %>" href="/ban/<%= user.uid %>" ><i class="fa fa-ban fa-white"></i> <%= translation('users.list.ban') %></a></li>
                           <% end %>
                       <% end %>
                     </ul>
                   </div>
                 </div>
                <div class="sub-info">
                  <div style="padding-bottom:6px;">
                    <% if user.status == 0 %>
                      <i class='fa fa-ban' style="color:#a00;"></i> <%= translation('users.list.banned') %> |
                    <% end %>
                    Active <%= t = user.revisions.order(timestamp: :desc).first.try(:created_at);time_ago_in_words(t) if (t) %> ago
                  </div>
                  <span id="tags" style="font-size:11px;">
                  <% tags = Tag.sort_according_to_followers(user.tags,"desc") %>
                  <% tags[0..2].each do |tag| %>
                      <span id="tag_<%= tag.id %>" style=""><a class="badge badge-primary mb-1" style="color: white;" href="/tag/<%= tag.name %>"><%= tag.name %></a></span>
                  <% end %>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
  <%= will_paginate @users, renderer: WillPaginate::ActionView::BootstrapLinkRenderer unless @unpaginated %>
</div>

<div class="col-md-12 col-lg-6 order-2 d-none d-lg-block">
  <%= render :partial => "map/peopleLeaflet" , locals: {lat:23 , lon: 4, zoom: 5} %>
</div>

<style>
#user {
  padding:10px 8px 10px 8px
}

h5 {
  color: #666;
}

h3, h2, h5 {
  font-family: Junction Regular;
}
.card {
  background-color: #fff;
  border: 1px solid;
  border-color: #D3D3D3;
  border-radius: 6px;
}

.card-body {
  margin-bottom:0.1em;
  margin-right: -0.7em;
  margin-left: 0.1em;
  padding: 0.5em;
}

.profile-image {
  margin-top: 0.5em;
}

#profile-photo {
  width: 6.5em;
  border-color:#555;
  border: 1px solid lightgrey;
}

.card-info {
  padding-left: 1em;
  padding-right:1em;
}

.card-info a{
  font-size:1.2em;
  margin-bttom:1em;
  color:#222;
}

.sub-info {
  color:#666;
  font-size:0.8em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.affix {
    top:50px;
    right:0;
    position:fixed;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.blurred-location-input{
  border-color: #D3D3D3;
}

.blurred-location-input i{
  color: #666;
}

.ellipsis{
  cursor: pointer;
}

.dropdown-menu li a{
  display: inline-block;
  padding-bottom: 5px;
  padding-left: 14px;
}

.sort-style{
  color: #808080;
}
.selected{
  text-decoration: underline;
}
</style>
<script>
$(function(){
  $("img").lazyload();
});
</script>
<%= render partial: 'tag/location' %>
